<script lang="ts" setup>
import binance from '@/assets/images/home/binance.png'
import coinmarketcap from '@/assets/images/home/coinmarketcap.png'
import ethereum from '@/assets/images/home/etherum.png'
import metamask from '@/assets/images/home/metamask.png'
import pancakeswap from '@/assets/images/home/pancakeswap.png'
import opensea from '@/assets/images/home/opensea.png'
import coingecko from '@/assets/images/home/coingecko.png'
import snapshot from '@/assets/images/home/snapshot.png'
import {useI18n} from "vue-i18n";

const {t} = useI18n()
</script>

<template>
<div class="partner-wrapper" data-aos="fade-left">
  <div class="partner-title">{{ t('message.home.partner.title') }}</div>
  <div class="partners">
    <img :src="binance" class="partner-img" alt="" />
    <img :src="metamask" class="partner-img" alt=""/>
    <img :src="ethereum" class="partner-img" alt=""/>
    <img :src="pancakeswap" class="partner-img" alt=""/>
    <img :src="opensea" class="partner-img" alt=""/>
    <img :src="coinmarketcap" class="partner-img" alt=""/>
    <img :src="snapshot" class="partner-img" alt=""/>
    <img :src="coingecko" class="partner-img" alt=""/>
  </div>
</div>
</template>

<style scoped lang="scss">
.partner-wrapper{
  @apply flex flex-col xs:mx-6 sm:mx-20 md:mx-10 lg:mx-[228px] xl:mx-[228px];
  .partner-title{
    margin-bottom: 108px;
    font-size: 72px;
    font-family: DINPro-Bold, DINPro;
    font-weight: bold;
    color: #161615;
    @apply self-center xs:mb-6 xs:mt-6 mt-40;
  }
  .partners{
    @apply self-center grid gap-x-28 gap-y-20 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 xs:gap-x-7 xs:gap-y-7 xs:mb-0;
    .partner-img{
      @apply xs:w-36 xs:h-8 w-72 h-16 cursor-pointer object-contain;
    }
  }
}
</style>
